import React from 'react';
import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from 'recharts';
import { useDiaryStore } from '../../store/diaryStore';

const TEMPLATE_COLORS = [
  '#059669', // forest-green
  '#84cc16', // sage
  '#f59e0b', // amber
  '#3b82f6', // blue
  '#8b5cf6', // purple
  '#ef4444', // red
  '#f97316', // orange
  '#06b6d4', // cyan
];

const TemplateUsageChart: React.FC = () => {
  const getTemplateUsageStats = useDiaryStore((state) => state.getTemplateUsageStats);
  const data = getTemplateUsageStats();

  if (data.length === 0) {
    return (
      <div className="bg-white rounded-lg shadow-sm border border-warm-gray-200 p-6">
        <h3 className="text-lg font-semibold text-warm-gray-800 mb-4">
          Template Usage
        </h3>
        <div className="flex items-center justify-center h-64 text-warm-gray-500">
          <p>No template usage data</p>
        </div>
      </div>
    );
  }

  const CustomTooltip = ({ active, payload }: any) => {
    if (active && payload && payload.length) {
      const data = payload[0].payload;
      return (
        <div className="bg-white p-3 border border-warm-gray-200 rounded-lg shadow-lg">
          <p className="font-medium text-warm-gray-800">{data.template}</p>
          <p className="text-sm text-warm-gray-600">
            {data.count} entries ({data.percentage}%)
          </p>
        </div>
      );
    }
    return null;
  };

  return (
    <div className="bg-white rounded-lg shadow-sm border border-warm-gray-200 p-6">
      <h3 className="text-lg font-semibold text-warm-gray-800 mb-4">
        Template Usage
      </h3>
      <ResponsiveContainer width="100%" height={300}>
        <PieChart>
          <Pie
            data={data}
            cx="50%"
            cy="50%"
            innerRadius={60}
            outerRadius={100}
            paddingAngle={2}
            dataKey="count"
          >
            {data.map((entry, index) => (
              <Cell 
                key={`cell-${index}`} 
                fill={TEMPLATE_COLORS[index % TEMPLATE_COLORS.length]} 
              />
            ))}
          </Pie>
          <Tooltip content={<CustomTooltip />} />
        </PieChart>
      </ResponsiveContainer>
      
      {/* Legend */}
      <div className="mt-4 space-y-2">
        {data.slice(0, 5).map((entry, index) => (
          <div key={entry.template} className="flex items-center justify-between text-sm">
            <div className="flex items-center gap-2">
              <div 
                className="w-3 h-3 rounded-full" 
                style={{ backgroundColor: TEMPLATE_COLORS[index % TEMPLATE_COLORS.length] }}
              />
              <span className="text-warm-gray-700 truncate max-w-32">
                {entry.template}
              </span>
            </div>
            <span className="text-warm-gray-600 font-medium">
              {entry.percentage}%
            </span>
          </div>
        ))}
        {data.length > 5 && (
          <div className="text-xs text-warm-gray-500 mt-2">
            +{data.length - 5} more templates
          </div>
        )}
      </div>
    </div>
  );
};

export default TemplateUsageChart;